<template>
  <div class="add-sample">
    <el-dialog
      ref="dialog"
      :visible.sync="dialogShow"
      title="自主上样"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600"
      @close="handleBack"
    >
      <c-form-container :column="1" :bottom="false">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="120px">
          <el-form-item prop="selfSampleLoadDesc" label="自主上样说明:">
            <el-input v-model="formData.selfSampleLoadDesc" type="textarea" :autosize="{minRows:3}" maxlength="1024" placeholder="自主上样说明" />
          </el-form-item>
          <el-form-item prop="processInstanceNo" label="BPM流程单号:">
            <el-input v-model="formData.processInstanceNo" placeholder="BPM流程单号" />
          </el-form-item>
        </el-form>
      </c-form-container>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="confirmHandle">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getProConfigEditData, submitConfigTable } from '@/api/proConfig'
export default {
  name: 'AddSample',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      formData: {
        selfSampleLoadDesc: ''
      },
      formRules: {
        selfSampleLoadDesc: [{ required: true, message: '请输入自主上样说明' }],
        processInstanceNo: [{ required: true, message: '请输入BPM流程单号' }]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  async created() {
    await getProConfigEditData(this.detailData.id).then(res => {
      if (res.success && res.data) {
        this.formData = res.data
      }
    })
    this.$nextTick(() => {
      this.$refs.form.clearValidate()
    })
  },
  methods: {
    // 取消
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    // 清空表单
    clearForm(done) {
      this.formData = {
        staff: [],
        office: []
      }
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    confirmHandle() {
      this.$refs.form.validate(validate => {
        if (validate) {
          this.formData.isLibertyLoad = 1
          this.formData.schedule = 'C'
          submitConfigTable(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.dialogShow = false
              this.clearForm()
              const isNew = !this.formData.id
              this.$emit('success', isNew)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.add-sample{
  display: inline-block;
}
</style>
